import React from 'react'
import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
type Props = {
    kdata: {
        val: Array<Array<number>>,
        x: Array<string>
    },
    w?: string,
    h?: string,
    id: string,
    isShowToolTip: boolean,
}

export default function Appechartk({ kdata, w, h, id, isShowToolTip }: Props) {
    const ref1 = useRef<HTMLDivElement | null>(null)
    // console.log('kdata', kdata);

    useEffect(() => {
        // console.log(ref1.current);
        var chartDom = document.getElementById(id)!;
        var myChart = echarts.init(chartDom);
        window.addEventListener('resize', function () {
            myChart.resize();
        });
        let option: any = {
            title: {
                text: '今日股票行情'
            },
            xAxis: {
                data: kdata.x
            },
            yAxis: {},
            series: [
                {
                    type: 'candlestick',
                    data: kdata.val
                }
            ]
        }
        //判断是否需要显示tooltip
        if (isShowToolTip) {
            option.tooltip = {}
        }
        myChart.setOption(option);


    }, [])

    return (
        <div id={id} style={{
            width: w ? w : '500px',
            height: h ? h : '500px',
            padding: '10px'
        }} ref={ref1}>Appechartk</div>
    )
}